<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{fragments/layout}">
<head th:include="/admin/common/header :: commonHead"></head>
<body class="iframe-h">
<div class="wrap-container email-wrap clearfix">
    <div class="row">
        <div class="email-edge col-lg-2">
            <button class="layui-btn layui-btn-normal email-write-btn" id="write-email-btn">写信</button>
            <dl class="email-folder">
                <dt>文件夹</dt>
                <dd>
                    <a href="javascript:;" data-url="email-list.html"><i class="iconfont">&#xe639;</i>收件箱
                        <button class="layui-btn  layui-btn-danger layui-btn-mini f-r">12</button>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" data-url="email-list.html"><i class="iconfont">&#xe603;</i>发信</a>
                </dd>
                <dd>
                    <a href="javascript:;" data-url="email-list.html"><i class="iconfont">&#xe602;</i>草稿
                        <button class="layui-btn layui-btn-warm layui-btn-mini f-r">2</button>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" data-url="email-list.html"><i class="layui-icon">&#xe640;</i>垃圾箱</a>
                </dd>
            </dl>
            <dl class="email-classify">
                <dt>分类</dt>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-blue">&#xe617;</i>工作</a>
                </dd>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-green">&#xe617;</i>文档</a>
                </dd>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-wran">&#xe617;</i>社交</a>
                </dd>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-red">&#xe617;</i>广告</a>
                </dd>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-gray">&#xe617;</i>客户端</a>
                </dd>
            </dl>
            <dl class="email-label">
                <dt>标签</dt>
                <dd>
                    <button class="layui-btn layui-btn-primary layui-btn-small">朋友</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">工作</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">孩子</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">关系</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">家庭</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">电影</button>
                </dd>

            </dl>
        </div>
        <div class="col-lg-10">
            <div class="email-content">
                <div class="email-content-title layui-form">
                    <span class="write-title">收件箱 (16)</span>
                </div>
                <div class="email-tool-btn clearfix">
                    <div class="col-lg-6 email-tool-btn-left">
                        <button class="layui-btn layui-btn-small layui-btn-primary" id='email-refresh-btn'
                                data-title='刷新'>
                            <i class="layui-icon">&#x1002;</i>
                        </button>
                        <button class="layui-btn layui-btn-small layui-btn-primary" id="email-read-btn" data-title='已读'>
                            <i class="layui-icon">&#x1002;</i>
                        </button>
                        <button class="layui-btn layui-btn-small layui-btn-primary" id='email-important-btn'
                                data-title='重要'>
                            <i class="layui-icon">&#xe600;</i>
                        </button>
                        <button class="layui-btn layui-btn-small layui-btn-primary" id='email-del-btn' data-title='删除'>
                            <i class="layui-icon">&#xe640;</i>
                        </button>
                    </div>
                    <div class="col-lg-6 email-tool-btn-right">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <input type="text" name="title" required lay-verify="required" placeholder="搜索邮件标题"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layui-btn-normal search-btn">搜索</button>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="layui-form email-list">
                    <table class="layui-table" lay-even lay-skin="nob">
                        <colgroup>
                            <col width="50">
                            <col width="200">
                            <col>
                            <col class="hidden-xs" width="150">
                        </colgroup>
                        <thead>
                        <tr>
                            <th><input type="checkbox" name="" lay-skin="primary" lay-filter="emailAllChoose"></th>
                            <th class="hidden-xs">来源</th>
                            <th>名称</th>
                            <th class="hidden-xs">创建时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="checkbox" name="" lay-skin="primary"></td>
                            <td class="hidden-xs">淘宝网</td>
                            <td><a href="javascript:;">史上最全！淘宝双11红包疯抢攻略！</a></td>
                            <td class="hidden-xs">1989-10-14</td>
                        </tr>
                        </tbody>
                    </table>
                    <div id="email-page" style="text-align: center;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<html th:include="/admin/common/footer :: commonFoot"></html>
<script>
    layui.use(['form', 'laypage', 'jquery', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer,
            laypage = layui.laypage,
            $ = layui.jquery;
        //获取当前iframe的name值
        var iframeObj = $(window.frameElement).attr('name');

        $('#write-email-btn').on('click', function () {
            parent.page("写邮件", 'email-write.html', iframeObj, w = "700px", h = "600px");
        })
        //列表
        $('.email-folder').on('click', 'a', function () {
            var url = $(this).attr('data-url');
            $('#iframeEmail').attr('src', url);

        })
        $('.email-tool-btn .f-l').on('mouseenter', 'button', function () {
            var title = $(this).attr('data-title');
            var id = '#' + $(this).attr('id');
            layer.tips(title, id, {
                tips: [1, '#444c63'],
                time: 1000
            });
        })
        //分页
        laypage({
            cont: 'email-page'
            , pages: 10
            , skin: '#1E9FFF'
        });
        form.on('checkbox(emailAllChoose)', function (data) {
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            child.each(function (index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        form.render();
        //非手机端，设置高度
        if (window.innerWidth >= 768) {
            $('.email-content').css('height', window.innerHeight - 30);
        }
        $(window).resize(function () {
            $('.email-content').css('height', window.innerHeight - 30);
        })
    });
</script>
</html>